@page "/circular-gauge/customization"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates how to customize the gauge with pointers. Options to change the color, value, and type of the pointer are available in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to customize the gauge elements such as pointers and range. Here a needle and range bar pointers are added to show the current value and its appearance can be customized here.</p>
   <p>More information on the annotations can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/annotations'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <div style="display:@Gauge1">
        <SfCircularGauge>
            <CircularGaugeEvents></CircularGaugeEvents>
            <CircularGaugeAxes>
                <CircularGaugeAxis StartAngle="300" EndAngle="60" Minimum="999" Maximum="2000" Radius="80%">
                    <CircularGaugeAxisLineStyle Width="0.01"/>
                    <CircularGaugeAxisMajorTicks Width="0.01"/>
                    <CircularGaugeAxisMinorTicks Width="0.01"/>
                    <CircularGaugeAxisLabelStyle>
                        <CircularGaugeAxisLabelFont Size="0px"/>
                    </CircularGaugeAxisLabelStyle>
                    <CircularGaugePointers>
                        <CircularGaugePointer Type="PointerType.RangeBar" Value=@TickValue Radius="90%" Color="@RangeBarColorValue" PointerWidth="30">
                            <CircularGaugePointerAnimation Enable="false" Duration="0"/>
                        </CircularGaugePointer>
                        <CircularGaugePointer Value=@TickValue Radius="90%" Color="@PointerColorValue" PointerWidth="9">
                            <CircularGaugePointerAnimation Enable="false" Duration="0"/>
                            <CircularGaugeCap Radius="10" Color="@PointerColorValue">
                                <CircularGaugeCapBorder Width="0" Color="@PointerColorValue"/>
                            </CircularGaugeCap>
                        </CircularGaugePointer>
                        <CircularGaugeRanges>
                            <CircularGaugeRange Start="1000" End="2000" Radius="90%" StartWidth="30" EndWidth="30" Color="@RangeColorValue"/>
                        </CircularGaugeRanges>
                    </CircularGaugePointers>
                    <CircularGaugeAnnotations>
                        <CircularGaugeAnnotation Angle="0" Radius="110%" ZIndex="1">
                            <ContentTemplate>
                                <div style='color:#666666;font-size:35px;margin-left:-40px;margin-top:-20px'>@TickValue</div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                    </CircularGaugeAnnotations>
                </CircularGaugeAxis>
            </CircularGaugeAxes>
        </SfCircularGauge>
    </div>
    <div style="display:@Gauge2">
        <SfCircularGauge>
            <CircularGaugeAxes>
                <CircularGaugeAxis StartAngle="180" EndAngle="180" Minimum="0" Maximum="100" Radius="80%">
                    <CircularGaugeAxisLineStyle Width="0.01"/>
                    <CircularGaugeAxisMajorTicks Width="0.01"/>
                    <CircularGaugeAxisMinorTicks Width="0.01"/>
                    <CircularGaugeAxisLabelStyle>
                        <CircularGaugeAxisLabelFont Size="0px"/>
                    </CircularGaugeAxisLabelStyle>
                    <CircularGaugePointers>
                        <CircularGaugePointer Type="PointerType.RangeBar" Value=@TickValue2 Radius="80%" Color="@RangeBarColorValueTwo" PointerWidth="30"/>
                        <CircularGaugeRanges>
                            <CircularGaugeRange Start="0" End="100" Radius="80%" StartWidth="30" EndWidth="30" Color="@RangeColorValueTwo"/>
                        </CircularGaugeRanges>
                    </CircularGaugePointers>
                    <CircularGaugeAnnotations>
                        <CircularGaugeAnnotation Angle="180" Radius="0%" ZIndex="1">
                            <ContentTemplate>
                                <div class="templateAlign" style="font-size:35px;margin-left:-40px;">@TickValue2 GB</div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                        <CircularGaugeAnnotation Angle="180" Radius="25%" ZIndex="1">
                            <ContentTemplate>
                                <div class="templateAlign" style="font-size:15px;margin-left:-20px;">Used</div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                    </CircularGaugeAnnotations>
                </CircularGaugeAxis>
            </CircularGaugeAxes>
        </SfCircularGauge>
    </div>
</div>

<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width:100%" title="Properties">
                <tbody>
                    <tr>
                        <td>
                            <button class="buttonAlign" @onclick="GaugeClick">
                                <img src="images/circular-gauge/gauge1.png" class="imageText" />
                            </button>
                            <div  class="gaugeCustom" style="display:@Gauge1;"></div>
                        </td>
                        <td>
                            <button class="buttonAlign" @onclick="NetClick">
                                <img src="images/circular-gauge/gauge2.png" class="imageText" />
                            </button>
                            <div class="gaugeCustom" style="display:@Gauge2;"></div>
                        </td>
                    </tr>
                    <br />
                    <tr>
                        <td>
                            <div>Current Value<span class="value">@Tick</span> </div>
                        </td>
                        <td>
                            <SfSlider TValue="double" Value="@Tick" Min="@Min" Max="@Max" Type=SliderType.MinRange>
                                <SliderEvents TValue="double" ValueChange="TickChange"/>
                            </SfSlider>
                        </td>
                    </tr>&nbsp;
                    <tr>
                        <td>
                            RangeBar Color
                        </td>
                        <td style="display:@Gauge1">
                            <SfDropDownList DataSource="@RangeBarColor" @bind-Value="@RangeBarColorValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="RangeBarColorchange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                        <td style="display:@Gauge2">
                            <SfDropDownList DataSource="@RangeBarColorTwo" @bind-Value="@RangeBarColorValueTwo" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="RangeBarColorTwochange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Range Color
                        </td>
                        <td style="display:@Gauge1">
                            <SfDropDownList DataSource="@RangeColor" @bind-Value="@RangeColorValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="RangeColorchange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                        <td style="display:@Gauge2">
                            <SfDropDownList DataSource="@RangeColorTwo" @bind-Value="@RangeColorValueTwo" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="RangeColorTwochange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Pointer Color
                        </td>
                        <td style="width: 50%;">
                            <SfDropDownList DataSource="@PointerColor" @bind-Value="@PointerColorValue" Width="120px" Enabled="@PointerColorDisable">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="PointerColorchange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    button:focus {
        outline: white auto 0px;
    }
    .value{
        margin-left:10px;
    }
    .templateAlign{
        color:#666666;
        margin-top:-35px;
    }
    .gaugeCustom{
        left: 0px;
        background: #ff4081;
        padding-top: 0px;
        height: 4px !important;
        width: 60px;
        margin: 2px 2px 2px 8px;
    }
    .imageText{
        width:70px;
        height:60px;
        background-color:white;
        margin-top:-10px;
        margin-left:-10px;
    }
    .buttonAlign {
        width:50px;
        height:50px;
        background-color:white
    }
    tr {
        height:40px;
    }
    td {
        width:50%;
    }
</style>

@code{
    public string Gauge1 = "block";
    public string Gauge2 = "none";
    public bool PointerColorDisable = true;
    public double Min = 1000;
    public double Max = 2000;
    public double Tick = 1800;
    public double TickValue2 = 50.5;
    public string RangeBarColorValue = "#FFDD00";
    public string RangeColorValue = "#E0E0E0";
    public string RangeBarColorValueTwo = "#FF2680";
    public string RangeColorValueTwo = "#E0E0E0";
    public string PointerColorValue = "#424242";
    public double TickValue = 1800;
    public void GaugeClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        Gauge2 = "none";
        Gauge1 = "block";
        PointerColorDisable = true;
        Min = 1000;
        Max = 2000;
        Tick = (TickValue == 1800) ? 1800 : TickValue;
    }
    public void NetClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        Gauge1 = "none";
        Gauge2 = "block";
        PointerColorDisable = false;
        Min = 0;
        Max = 100;
        Tick = (TickValue2 == 50.5) ? 50.5 : TickValue2;
        TickValue2 = (TickValue2 == 50.5) ? 50.5 : TickValue2;
    }
    public void TickChange(Syncfusion.Blazor.Inputs.SliderChangeEventArgs<double> args) {
        Tick = args.Value;
        if (Min == 0) {
            TickValue2 = args.Value;
        }
        else {
            TickValue = args.Value;
        }
    }
    public class DropdownList {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<DropdownList> RangeBarColor = new List<DropdownList> {
        new DropdownList { Value="#FFDD00", Name="#FFDD00" },
        new DropdownList { Value="#00bdae", Name="#00bdae" },
        new DropdownList { Value="#FF2680", Name="#FF2680" }
    };
    public List<DropdownList> RangeColor = new List<DropdownList> {
        new DropdownList { Value="#E0E0E0", Name="#E0E0E0" },
        new DropdownList { Value="#7bb4eb", Name="#7bb4eb" },
        new DropdownList { Value="#ea7a57", Name="#ea7a57" }
    };
    public List<DropdownList> PointerColor = new List<DropdownList> {
        new DropdownList { Value="#424242", Name="#424242" },
        new DropdownList { Value="#6f6fe2", Name="#6f6fe2" },
        new DropdownList { Value="#9e480e", Name="#9e480e" }
    };
    public List<DropdownList> RangeBarColorTwo = new List<DropdownList> {
        new DropdownList { Value="#FF2680", Name="#FF2680" },
        new DropdownList { Value="#00bdae", Name="#00bdae" },
        new DropdownList { Value="#FFDD00", Name="#FFDD00" },
    };
    public List<DropdownList> RangeColorTwo = new List<DropdownList> {
        new DropdownList { Value="#E0E0E0", Name="#E0E0E0" },
        new DropdownList { Value="#7bb4eb", Name="#7bb4eb" },
        new DropdownList { Value="#ea7a57", Name="#ea7a57" }
    };
    public List<DropdownList> PointerColorTwo = new List<DropdownList> {
        new DropdownList { Value="#424242", Name="#424242" },
        new DropdownList { Value="#6f6fe2", Name="#6f6fe2" },
        new DropdownList { Value="#9e480e", Name="#9e480e" }
    };
    public void RangeBarColorchange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> args) {
        RangeBarColorValue = args.Value;
    }
    public void RangeBarColorTwochange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> args) {
        RangeBarColorValueTwo = args.Value;
    }
    public void RangeColorchange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> rangeArgs) {
        RangeColorValue = rangeArgs.Value;
    }
    public void RangeColorTwochange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> rangeArgs) {
        RangeColorValueTwo = rangeArgs.Value;
    }
    public void PointerColorchange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> rangeArgs) {
        PointerColorValue = rangeArgs.Value;
    }
}